<template>
    <div class="HotListCon">
        <div class="HotListCon-1">
            <van-tabs swipeable animated v-model="active" class="HotListCon-1-tab">
                <van-tab title="综合排行">
                    <div class="HotListCon-list">
                        <div class="HotListCon-left">
                            <img src="image/HotList/HotList-list-1.png" alt="">
                        </div>
                        <div class="HotListCon-right">
                            <h3>枝纯蓝莓125g (14mm+)清甜微酸清甜微酸清甜微酸清甜微酸清甜微酸清甜微酸清甜微酸清甜微酸清甜微酸</h3>
                            <div>
                                <van-tag type="primary" color="#f5f5f5" text-color="#999">营养丰富</van-tag>&nbsp;&nbsp;
                                <van-tag type="primary" color="#f5f5f5" text-color="#999">清甜微酸</van-tag>
                            </div>
                           <div class="HotListCon-right-hot">
                                <van-tag round color="#eb5f40" text-color="#fff"><van-icon name="fire"/>热卖指数97</van-tag>
                           </div>
                            <div class="HotListCon-right-1">
                                <div class="HotListCon-right-left">
                                   <p><span class="HotListCon-right-left-money">￥</span>5.5<span>/盒</span></p>
                                </div>
                                <div class="HotListCon-right-right">
                                    <van-icon name="cart-circle" />
                                </div>
                            </div>
                        </div>
                    </div>
                     <div class="HotListCon-list">
                        <div class="HotListCon-left">
                            <img src="image/HotList/HotList-list-1.png" alt="">
                        </div>
                        <div class="HotListCon-right">
                            <h3>枝纯蓝莓125g (14mm+)清甜微酸清甜微酸清甜微酸清甜微酸清甜微酸清甜微酸清甜微酸清甜微酸清甜微酸</h3>
                            <div>
                                <van-tag type="primary" color="#f5f5f5" text-color="#999">营养丰富</van-tag>&nbsp;&nbsp;
                                <van-tag type="primary" color="#f5f5f5" text-color="#999">清甜微酸</van-tag>
                            </div>
                           <div class="HotListCon-right-hot">
                                <van-tag round color="#eb5f40" text-color="#fff"><van-icon name="fire"/>热卖指数97</van-tag>
                           </div>
                            <div class="HotListCon-right-1">
                                <div class="HotListCon-right-left">
                                   <p><span class="HotListCon-right-left-money">￥</span>5.5<span>/盒</span></p>
                                </div>
                                <div class="HotListCon-right-right">
                                    <van-icon name="cart-circle" />
                                </div>
                            </div>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="水果">内容 2</van-tab>
                <van-tab title="奶制场">内容 3</van-tab>
                <van-tab title="海鲜水产">内容 4</van-tab>
                <van-tab title="肉禽蛋">内容 5</van-tab>
                <van-tab title="蔬菜">内容 6</van-tab>
                <van-tab title="烘焙西点">内容 7</van-tab>
                <van-tab title="餐饮熟食">内容 8</van-tab>
                <van-tab title="面食面点">内容 9</van-tab>
                <van-tab title="零食">内容 10</van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            active: 0
        };
    },
}
</script>

<style scoped>
.HotListCon-1{
    width: 100%;
    height: 100%;
    background-color: skyblue;
    position: absolute;
    border-top-left-radius: .10rem;
    border-top-right-radius: .10rem;
}
.van-tabs--line .van-tabs__wrap {
    height: 40px;
}
.HotListCon-list{
    margin-top: .14rem;
    background-color: #fefefe;
}
.HotListCon-right-left{
    display: flex;
    align-items: center;
}
.HotListCon-right-left p{
    font-size: .17rem;
    font-weight: bold;
    color: #e93340;
}
.HotListCon-right-left p span{
    font-size: .12rem;
    font-weight: normal;
    color: #bababa;
}
.HotListCon-right-left p .HotListCon-right-left-money{
    font-size: .12rem;
    font-weight: bold;
    color: #e93340;
}
.HotListCon-right-hot{
    margin:.06rem 0;
}
.HotListCon-right-right i{
    font-size: .27rem;
    color: #4facf6;
    vertical-align: bottom;
}
.HotListCon-right-hot .van-tag{
    line-height: .21rem;
}
/* .HotListCon-right-hot{
    color: #fff;
    height: .21rem;
    line-height: .21rem;
    border-radius: .21rem;
    padding:0 .05rem;
    background-color: #eb5f40;
} */
/* .HotListCon-right p span{
    border-radius: .03rem;
    background-color: #f5f5f5;
    color: #999999;
    height: .15rem;
    line-height: .15rem;
    padding:0 .05rem;
    margin-right: .03rem;
} */
.HotListCon-right h3{
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: .28rem;
    line-height: .28rem;
    font-size: .15rem;
}
.HotListCon-right{
    width: 100%;
}
.HotListCon-right-1{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.HotListCon-right{
    width: 70%;
    padding: 0 .13rem;
}
.HotListCon-left{
    width: 30%;
    text-align: right;
    display: flex;
    justify-content: flex-end;
}
.HotListCon-left img{
    width: 1.09rem;
    height: 1.09rem;
    object-fit: cover;
    display: block;
    text-align: right;
}
.HotListCon-list{
    display: flex;
}
</style>